<template>
  <div class="box">
    <!-- <div class="goHome" @click="goHome">返回主页</div> -->
    <div class="content">
      <div class="brran" v-if="status">
        <div class="left">
          <h1>企业风险扫描</h1>
          <h6>及时发现并应对各种风险，确保企业的稳定和可持续发展</h6>
          <img src="@/assets/brran/组125.png" alt="" />
        </div>
        <div class="right" v-loading="loading">
          <div class="f1">
            <div class="f1_left">
              <img src="@/assets/brran/灯泡.png" alt="" />
            </div>
            <div class="f1_right">
              <h6>
                <p>风险扫描中的数据是基于公开信息通过风险模型大数据分析后的结果，仅供用户参考</p>
              </h6>
              <!-- <h6>
                <p></p>
              </h6> -->
            </div>
          </div>
          <div class="f2">
            <el-input
              v-model="queryParams.entname"
              placeholder="请输入企业名称/统一社会信用代码"
              clearable
            />
          </div>
          <div class="btn">
            <button @click="scan">开始扫描</button>
          </div>
        </div>
      </div>
      <!-- 显示扫描进度 -->
      <div class="popUp" v-else>
        <div class="popUp_top">
          <h3>风险扫描</h3>
          <img @click="close" src="@/assets/brran/叉.png" alt="" />
        </div>
        <div class="popUp_bottom">
          <div class="popUp_bottom_left">
            <img v-if="ing" src="@/assets/brran/组110.png" alt="" />
            <img v-else src="@/assets/brran/组109.png" alt="" />
            <h3 v-if="ing">扫描中</h3>
            <h3 v-else>
              存在<span style="color: #f74343"> {{ jilu }} </span>处风险
            </h3>
            <div class="button" :class="{ active: active }" @click="goRiskDetails">查看详情</div>
          </div>
          <div class="popUp_bottom_right">
            <ul>
              <li v-for="item in list" :key="item.success">
                <div style="display: flex; align-items: center">
                  <img v-if="ing" src="@/assets/brran/ing.png" alt="" />
                  <img v-else-if="ing || item.error" src="@/assets/brran/组001.png" alt="" />
                  <img v-else src="@/assets/brran/check.png" alt="" />
                  <p>{{ item.success }}</p>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { findfxsm } from '@/api/brran/riskqueryind'
import { myPostFetch } from '@/api/report'
export default {
  data() {
    return {
      loading: false,
      active: false,
      jilu: '0',
      ing: true,
      list: [
        {
          success: '是否存在经营状态异常',
          error: false
        },
        {
          success: '是否存在失信公告',
          error: false
        },
        {
          success: '是否最近1年存在执行公告',
          error: false
        },
        {
          success: '是否存在终本案件记录',
          error: false
        },
        {
          success: '是否存在限制高消费记录',
          error: false
        },
        {
          success: '是否目前存在经营异常',
          error: false
        },
        {
          success: '是否最近1年存在重大税收违法',
          error: false
        },
        {
          success: '是否最近1年存在行政处罚',
          error: false
        },
        {
          success: '是否最近1年存在法定代表人变更',
          error: false
        },
        {
          success: '是否最近1年存在欠税记录',
          error: false
        },
        {
          success: '是否存在股权出质',
          error: false
        },
        {
          success: '是否最近1年存在经营范围变更',
          error: false
        },
        {
          success: '是否存在动产抵押',
          error: false
        },
        {
          success: '是否存在股权冻结',
          error: false
        }
      ],
      status: true,
      queryParams: {
        entname: ''
      }
    }
  },
  mounted() {
    document.documentElement.scrollTop = 0
    this.queryParams.entname = this.$route.query.entname ? this.$route.query.entname : ''
  },
  methods: {
    goHome() {
      this.$router.push('/')
    },
    async scan() {
      this.loading = true
      this.active = true
      let entname = this.queryParams.entname
      let customerid = localStorage.getItem('businessid')
      // 清除error数据
      for (let i = 0; i < this.list.length; i++) {
        this.list[i].error = false
      }
      if (entname == '') return this.$Message.error('请输入企业名称')
      let url = '/fxsm/findfxsmfirst'
      let params = { entname: entname }
      let a = await myPostFetch(url, params)
      if (a.result == '企业不存在') {
        this.loading = false
        this.$Message.error('请输入正确的企业名称/统一社会信用代码')
        return
      }
      this.loading = false
      entname = a.entname
      this.queryParams.entname = entname
      this.ing = true
      this.status = false
      findfxsm(entname, customerid)
        .then(res => {
          this.jilu = res.jilu
          this.ing = false
          this.active = false
          Object.keys(res.shuju).forEach(item => {
            if (item == 'gs_0000011') {
              this.list[0].error = true
            } else if (item == 'ss_0000002') {
              this.list[1].error = true
            } else if (item == 'ss_0000013') {
              this.list[2].error = true
            } else if (item == 'ss_0000011') {
              this.list[3].error = true
            } else if (item == 'ss_0000012') {
              this.list[4].error = true
            } else if (item == 'gs_0000007') {
              this.list[5].error = true
            } else if (item == 'gs_0000020') {
              this.list[6].error = true
            } else if (item == 'gs_0000019') {
              this.list[7].error = true
            } else if (item == 'gs_0000002') {
              this.list[8].error = true
            } else if (item == 'gs_0000021') {
              this.list[9].error = true
            } else if (item == 'gs_0000004') {
              this.list[10].error = true
            } else if (item == 'gs_0000001') {
              this.list[11].error = true
            } else if (item == 'gs_0000003') {
              this.list[12].error = true
            } else if (item == 'gs_0000005') {
              this.list[13].error = true
            }
          })
        })
        .catch(err => {})
    },
    close() {
      this.status = true
    },
    goRiskDetails() {
      if (this.active) return
      let entname = this.queryParams.entname
      this.$router.push(`/brran/riskDetails?entname=${entname}`)
    }
  }
}
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
/*去掉列表前面的小点*/
ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.box {
  position: relative;
  width: 100%;
  height: 4.6146rem;
  background: url(@/assets/brran/组124.jpg) no-repeat;
  background-size: auto 100%;
  opacity: 1;
  .goHome {
    cursor: pointer;
    z-index: 9999;
    position: absolute;
    right: 0.4167rem;
    top: 0.2083rem;
    font-size: 0.0833rem;
    font-weight: 500;
    color: #ffffff;
    text-decoration: underline;
  }
  .content {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
    height: 4.6146rem;
    .brran {
      display: flex;
      justify-content: space-between;
      width: 6.25rem;
      height: 4.6146rem;
      margin: 0 auto;
      align-items: center;
      .left {
        box-sizing: border-box;
        padding-top: 0.599rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 2.6042rem;
        height: 100%;
        img {
          margin-top: -0.4688rem;
          width: 3.8802rem;
          height: 2.9844rem;
        }
        h1 {
          font-size: 0.2083rem;
          font-family: Source Han Sans SC;
          font-weight: bold;
          color: #ffffff;
          margin-bottom: 0.1354rem;
        }
        h6 {
          font-size: 0.0938rem;
          font-family: Source Han Sans SC;
          font-weight: 300;
          color: #ffffff;
        }
      }
      .right {
        box-sizing: border-box;
        padding: 0.2865rem 0.1927rem 0.3438rem 0.1927rem;
        width: 2.6354rem;
        height: 1.8646rem;
        border-radius: 0.0417rem;
        background: #ffffff;
        .f1 {
          display: flex;
          margin-bottom: 0.2083rem;
          .f1_left {
            img {
              width: 0.1042rem;
              height: 0.1042rem;
              margin-top: 0.026rem;
              margin-right: 0.026rem;
            }
          }
          .f1_right {
            h6 {
              display: flex;
              background-color: rgba(10, 123, 224, 0.1);
              margin-bottom: 0.026rem;
              box-sizing: border-box;
              padding: 0.026rem 0.0417rem;
              p {
                font-size: 0.0729rem;
                font-family: Source Han Sans SC;
                font-weight: 500;
                color: #0f7be5;
              }
            }
          }
        }
        .btn {
          display: flex;
          justify-content: center;
          width: 100%;
          height: 0.2083rem;
          margin-top: 0.3854rem;
          button {
            width: 1.1979rem;
            height: 0.2083rem;
            background: #0a7be0;
            border-radius: 0.0208rem;
            font-size: 0.0938rem;
            font-family: Source Han Sans SC;
            font-weight: 300;
            color: #fff;
          }
        }
      }
    }
    .popUp {
      display: flex;
      flex-direction: column;
      box-sizing: border-box;
      width: 6.25rem;
      height: 3.1615rem;
      margin: 0 auto;
      background: #ffffff;
      border-radius: 0.0521rem;
      padding: 0 0.1563rem;
      .popUp_top {
        box-sizing: border-box;
        // padding: 0 25px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        height: 0.3646rem;
        border-bottom: 0.0052rem solid #e0e0e0;
        h3 {
          width: 100%;
          text-align: center;
          font-weight: bold;
          font-size: 0.1458rem;
          font-weight: 600;
          color: #000000;
        }
        img {
          cursor: pointer;
          width: 0.1146rem;
        }
      }
      .popUp_bottom {
        box-sizing: border-box;
        display: flex;
        // flex: 1;
        width: 100%;
        margin-top: 0.2083rem;
        .popUp_bottom_left {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 1.6146rem;
          height: 100%;
          background-color: #fff;
          h3 {
            font-size: 0.0938rem;
            font-family: Source Han Sans SC;
            font-weight: 500;
            color: #333333;
          }
          .button {
            cursor: pointer;
            display: flex;
            justify-content: center;
            align-items: center;
            width: 0.8333rem;
            height: 0.2083rem;
            background: #0a7be0;
            border-radius: 0.0208rem;
            font-size: 0.0833rem;
            font-family: Source Han Sans SC;
            font-weight: 300;
            color: #ffffff;
            margin-top: 0.2813rem;
            &.active {
              background-color: rgb(192, 188, 188);
            }
          }
          img {
            width: 0.7813rem;
            margin-bottom: 0.1563rem;
          }
        }
        .popUp_bottom_right {
          flex: 1;
          box-sizing: border-box;
          ul {
            display: flex;
            justify-content: space-around;
            flex-wrap: wrap;
            li {
              width: 35%;
              height: 0.2083rem;
              display: flex;
              align-items: center;
              justify-content: space-between;
              margin-bottom: 0.1042rem;
              img {
                width: 0.1094rem;
                height: 0.1094rem;
              }
            }
            p {
              font-size: 0.0833rem;
              font-family: Source Han Sans SC;
              font-weight: 400;
              color: #000;
              margin-left: 0.0417rem;
            }
          }
        }
        .popUp_bottom_right::-webkit-scrollbar {
          width: 0.026rem;
          height: 0.0521rem;
          background-color: #fff;
        }

        .popUp_bottom_right::-webkit-scrollbar-thumb {
          border-radius: 0.0104rem;
          background: rgba(94, 96, 97, 0.5);
        }
      }
    }
  }
}
::v-deep .el-input__inner {
  border: 0.0052rem solid #999;
  height: 0.2604rem;
}
/* 输入框样式  */
::v-deep .el-input__inner {
  font-size: 0.0625rem;
  box-sizing: border-box;
  width: 2.2552rem;
  height: 0.25rem;
  font-size: 0.0781rem;
  border: 0.0052rem solid #e0e0e0;
  border-radius: 0.0208rem;
  padding: 0.0521rem;
  color: #606266;
  background-color: #f7f7f7;
  outline: 0;
  line-height: 0.1823rem !important;
}
</style>
